<template>
	<div class="infor">
		<div class="box">
			<p>个人信息</p>
			<el-form ref='form' :model='form' style='width: 40%;'>
				<el-form-item label='修改名称:'>
					<el-input v-model='form.nickname'></el-input>
				</el-form-item>
				<el-form-item label='修改密码:'>
					<el-input v-model='form.pwd' type='password'></el-input>
				</el-form-item>
				
				<el-form-item label='修改电话:'>
					<el-input v-model='form.phone'></el-input>
				</el-form-item>
				<el-form-item label='图片:'>
					<input type="file" ref='img'/>
				</el-form-item>
			</el-form>
			<button @click="but()">确认修改</button>
		</div>
	</div>
</template>

<script>
	//引入拦截器
	import instance from '../../../ajax/index.js'
	
	export default{
		name:'infor',
		data(){
			return{
				form:{
					pwd:'',
					nickname:'',
					phone:'',
					img:''
				},
			}
		},
		methods:{
			//点击按钮修改个人信息
			but(){
				//备份
				let that = this
				
				//向后台提交需要修改的用户名 或电话
				instance.post('/api/fore/user/updateInfo' , this.$qs.stringify(this.form),{
						header:{'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'}
				}).then((res)=>{
						that.form.nickname=''
						that.form.phone=''
						console.log(res)
				}).catch((error)=>{
					console.log(error)
				})
				
				//向后台提交需要修改的密码
				instance.post('/api/fore/user/updatePwd' , this.$qs.stringify(this.form),{
						header:{'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'}
				}).then((res)=>{
						that.form.pwd=''
						console.log(res)
				}).catch((error)=>{
					console.log(error)
				})
				
				//向后台添加需要上传的图片
				//获取图片完整数据
				let fs = this.$refs.img.files
				//创建一个空的表单对象数据
				let fd = new FormData()
				//将需要打包的数据，append方式提交给对象
				fd.append('img',fs[0])
				instance.post('/api/fore/user/updateImg',fd,{
					header:{'Content-Type' : 'multipart/form-data'}
				}).then((res)=>{
					if(res.status === 200){
						console.log(that.form.img)
						that.form.img=''
						console.log(res)
					}
				}).catch((error)=>{
					console.log(error)
				})
			}
		}
	}
</script>

<style scoped>
.infor{
	width: 95%;
	height: 700px;
	margin: 20px auto;
	background-color: #7fffd4;
	border-radius: 15px;
	padding-bottom: 10px;
}
.box p:first-child{
	font-size: 30px;
	color: ;
	font-weight: bold;
	padding: 20px;
	padding-right: 25px;
}
.infor .el-form-item :deep(.el-form-item__label){
	font-size: 20px;
}
</style>
